<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>下拉菜单</title>
  <style type="text/css">
    body {
      width: 1600px;
    }

    ul{
      list-style-type: none;
    }
    
    #app>ul>li {
      float: left;
      text-align: center;
      position: relative;
    }

    a {
      text-decoration: none;
      display: block;
      color: #fff;
      width: 120px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #fff;
      border: 1px 1px 0 0;
      background-color: #ed1c23;
    }

    a:hover {
      background-color: #d90616;
    }

    #app>ul>li ul {
      position: absolute;
      left: -40px;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
        <a :href="menu.url">{{menu.name}}</a>
        <ul v-show="menu.show">
          <li v-for="subMenu in menu.subMenus">
            <a :href="subMenu.url">{{subMenu.name}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
           menus: [
            {
              name: '首页', url: '#', show: false, subMenus: [
              ]
            },
            {
              name: '关于红岩', url: '#', show: false, subMenus: [
                { name: '红岩文化', url: '#' },
                { name: '博物馆机构', url: '#' },
                { name: '博物馆机构', url: '#' }
              ]
            },
            {
              name: '公告动态', url: '#', show: false, subMenus: [
                { name: '文博信息', url: '#' },
                { name: '政务平台', url: '#' },
                { name: '公告', url: '#' },
                { name: '专题报道', url: '#' }, 
              ]
            },
            {
              name: '馆藏精品', url: '#', show: false, subMenus: [
                { name: '一级文物', url: '#' },
                { name: '二级文物', url: '#' },
                { name: '三级文物', url: '#' },
              ]
            },
            {
              name: '陈列展览', url: '#', show: false, subMenus: [
                { name: '虚拟展览', url: '#' },
                { name: '基本陈列', url: '#' },
                { name: '复原陈列', url: '#' },
                { name: '临时展览', url: '#' },
                { name: '展览交流', url: '#' },
              ]
            },
            {
              name: '研究开发', url: '#', show: false, subMenus: [
                { name: '历史研究', url: '#' },
                { name: '艺术研究', url: '#' },
                { name: '影音在线', url: '#' },
                { name: '文创作品', url: '#' },
              ]
            },
            {
              name: '公共教育', url: '#', show: false, subMenus: [
                { name: '党性教育', url: '#' },
                { name: '爱国主义教育', url: '#' },
                { name: '科学实践教育', url: '#' },
                { name: '科普教育', url: '#' },
              ]
            },
            {
              name: '参观服务', url: '#', show: false, subMenus: [
                { name: '景点介绍', url: '#' },
                { name: '服务内容', url: '#' },
                { name: '网上预约', url: '#' },
                { name: '志愿服务', url: '#' },
              ]
            },
            {
              name: '网上预约', url: '#', show: false, subMenus: [
              ]
            },
          ]
        }
      },
    }).mount("#app")
   
  </script>
</body>

</html>